<template>
  <view class="container">
    <view
      class="radio"
      :class="[modelValue === BoTypeEnum.Supply ? 'selected' : '']"
      @click="emits('update:modelValue', BoTypeEnum.Supply)"
    >
      <text class="title">供应</text>
      <text class="desc">可提供的资源/产品/服务</text>
    </view>
    <view
      class="radio"
      :class="[modelValue === BoTypeEnum.Demand ? 'selected' : '']"
      @click="emits('update:modelValue', BoTypeEnum.Demand)"
    >
      <text class="title">需求</text>
      <text class="desc">资源/产品/服务需求</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import type { PropType } from 'vue';

  /**供需类型 */
  const props = defineProps({
    modelValue: {
      type: Number as PropType<BoTypeEnum>,
      default: undefined,
    },
  });

  const emits = defineEmits(['update:modelValue']);
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    justify-content: space-between;
    .selected {
      border: 1px solid #2878ff !important;
      background-color: #d0f7ff;
      .title {
        color: #2878ff !important;
      }
      .desc {
        color: #2878ff !important;
      }
    }
    .radio {
      box-sizing: border-box;
      width: 320rpx;
      height: 136rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8rpx;
      border: 1px solid #dcdee0;
      gap: 8rpx;
      .title {
        color: #646566;
        font-size: 32rpx;
        line-height: 48rpx;
      }
      .desc {
        color: #969799;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
  }
</style>
